<!--
 * @Author: your name
 * @Date: 2021-09-06 10:22:26
 * @LastEditTime: 2021-09-06 16:48:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\5-javascript\day11\2-Element.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div class="one" id="myDiv" style="color:red;">
        myDiv
    </div>
    <img src="/netease-koala/images/考拉logo.png" alt="" style="color:aqua;">
</body>
<script>
    //getElementsByClassName返回值是数组，所以得加索引下标
    var node = document.getElementsByClassName("one")[0];
    console.log(node);
    node.className = "two";
    //设置属性  如果要把以前的类名改掉，setAttribute里的第一个属性改为"class"
    //node.setAttribute("className", "three");
    node.setAttribute("class", "three");
    //获取属性
    console.log(node.getAttribute("class")); //three
    console.log(document.getElementById("myDiv")); //myDiv那一行
    console.log(document.getElementById("class")); //null
    console.log(document.getElementById("id")); //null
    console.log(document.getElementById("style")); //null
    //remoteAttribute:移除id选择器
    myDiv.removeAttribute("id");
    console.log(document.getElementById("myDiv")); //null
    var myImg = document.getElementsByTagName("img")[0];
    console.log(myImg.getAttribute("src"));
    console.log(myImg.getAttribute("alt"));
    console.log(myImg.getAttribute("style"));
</script>

</html>